import { security } from "@mall/api-services"
import Vue from "vue"
import VueRouter, { RouteConfig } from "vue-router"
import addresses from "./addresses"
import coupons from "./coupons"
import customers from "./customers"
import orders from "./orders"
import payments from "./payments"
import products from "./products"

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    component: () => import("../views/home"),
  },
  {
    path: "/search",
    name: "Search",
    component: () => import("../views/search"),
  },
  {
    path: "/categories",
    name: "categories",
    component: () => import("../views/categories"),
  },
  {
    path: "/cart",
    name: "Cart",
    component: () => import("../views/cart"),
    meta: { requiresAuth: true },
  },
  {
    path: "/my-center",
    name: "MyCenter",
    component: () => import("../views/my-center"),
    meta: { requiresAuth: true },
  },
  {
    path: "/login",
    name: "Login",
    props: (route) => ({
      phone: route.query.phone,
      credentialsType: route.query.credentials_type,
    }),
    component: () => import("../views/user").then(user => user.Login),
  },
  {
    path: "/register",
    name: "Register",
    props: true,
    component: () => import("../views/user").then(user => user.Register),
  },

  {
    path: "/browsing-products",
    name: "BrowsingProducts",
    component: () => import("../views/browsing").then(browsing => browsing.ProductList),
    meta: { requiresAuth: true },
  },
  {
    path: "/follow-products",
    name: "FollowProducts",
    component: () => import("../views/follow").then(follow => follow.ProductList),
    meta: { requiresAuth: true },
  },
  {
    path: "/follow-stores",
    name: "FollowStores",
    component: () => import("../views/follow").then(follow => follow.StoreList),
    meta: { requiresAuth: true },
  },
  {
    path: "/checkouts/:id",
    name: "Checkout",
    component: () => import( "../views/checkout"),
    props: true,
  },
  {
    path: "/stores/:id",
    component: () => import( "../views/store"),
    redirect: "/stores/:id/home",
    props: true,
    children: [
      {
        path: "home",
        name: "StoreHome",
        props: true,
        component: () => import( "../views/store").then(store => store.Home),
      },
      {
        path: "products",
        name: "StoreProducts",
        props: (route) => ({
          id: route.params.id,
          collections: route.query.collections,
        }),
        component: () => import( "../views/store").then(store => store.Products),
      },
      {
        path: "/stores/:id/collections",
        name: "StoreCollections",
        props: true,
        component: () => import( "../views/store").then(store => store.Collections),
      }],
  },
  ...products,
  ...customers,
  ...addresses,
  ...payments,
  ...orders,
  ...coupons,
]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
})


router.beforeEach((to, from, next) => {
  // routeHistory
  if (to.meta.requiresAuth) {
    const isAuthenticated = security.SecurityUserHolder.isAuthenticated()
    if (isAuthenticated) {
      next()
    } else {
      next("/login")
    }
  } else {
    next()
  }
})


export default router
